<template>
  <div>
    <el-button type="warning" @click="print()" size="small" >批量打印</el-button>
    <vue-easy-print ref='printContent' > 
       <div v-for="(item,index) in selectedArr" :key="index" style="page-break-after:always"> 
        <div class="center">
          <u class="text" style="color:black;text-align: center;margin: 10px auto;"> 供应商结算对账单（租赁）</u>
        </div>
        <div class="between">
          <!-- <p v-if="item.saleDataq[0]"><b>楼层： </b><span>{{item.saleDataq[0].propertyPlaceNa}}</span></p>
          <p v-else><b>楼层： </b><span>{{item.propertyPlaceNa}}</span></p> -->
          <p><b>销售时间： </b><span>{{date}}</span></p>
        </div>
        <div class="between">
          <p><b>供应商： </b><span>{{"["+item.partnerId+"] "+item.partnerNa}}</span></p>
        </div>
        
        <div class="between">
          <p><b>销售码： </b><span>{{item.gdno}}</span></p>
          <p><b>品牌： </b><span>{{item.brandNa}}</span></p>
        </div>
        <img src="@/assets/img/logo.png" alt="">
        <!-- <table v-if="item.saleDataq.length!== 0" width="100%"  cellspacing='0' cellpadding='6' class="table"> -->
          <!-- <thead>
            <tr>
              <th v-for="(it,i) in tabHeaderOne" :key="i">{{it.label}}</th>
            </tr>
          </thead> -->
            <!-- <tr v-for="(it,i) in item.saleDataq" :key="i" :class="it.saleCodeType=='小计'?'sum':''">
              <td>{{it.saleCodeType}}</td>
              <td class="right">{{it.orisales}}</td>
              <td class="right">{{it.netsales}}</td>
              <td class="right">{{it.checkNetSale}}</td>
              <td class="right">{{it.accountRate }}</td>
              <td class="right">{{it.checkNetSale}}</td> 
            </tr> -->
        <!-- </table> -->
        <!-- <table v-if="item.feeDataq.length!== 0" width="100%"  cellspacing='0' cellpadding='6' class="table" >  
          <thead>
            <tr>
              <th v-for="(it,i) in tabHeaderTwo" :key="i">{{it.label}}</th>
            </tr>
          </thead> -->
            <!-- <tr v-for="(it,i) in item.feeDataq" :key="i" :class="it.itemclsna=='小计'?'sum':''">
              <td style="text-align:left">{{it.itemclsna}}</td>
              <td style="text-align:right">{{it.payamt}}</td>
            </tr> -->
            
        <!-- </table> -->
        
        <!-- <div class="between top"> -->
          <!-- <p><b>开票金额： </b><span>{{payamtSum | customFormat(2)}}</span></p> -->
          <!-- <p><b>开票金额： </b><span>0.00</span></p>
          <p v-if="checkNetSaleSum !== 0"><b>实际返款额：</b><span>{{checkNetSaleSum - paySum | customFormat(2)}}</span></p>
          <p v-else><b>实际返款额： </b><span>{{paySum | customFormat(2)}}</span></p>
        </div> -->
        <div :class="'info center br'+index">
          <div class="between">
            <p><b>制&nbsp;&nbsp;&nbsp;&nbsp;单： </b><span>_____________</span></p>
            <p><b>供应商： </b><span>_____________</span></p>
          </div>
          <div class="between">
            <p><b>复&nbsp;&nbsp;&nbsp;&nbsp;核： </b><span>_____________</span></p>
            <p><b>商品部： </b><span>_____________</span></p>
          </div>
          <div class="between">
            <p><b>财务部： </b><span>_____________</span></p>
            <p><b>副总经理： </b><span>_____________</span></p>
            <p><b>总经理： </b><span>_____________</span></p>
          </div>
        </div>
     
      </div>
    </vue-easy-print>
  </div>
</template>

<script>
import vueEasyPrint from "vue-easy-print";
export default {
//   props:["selectedArr","checkData","date"],
  components:{
    vueEasyPrint
  },
  data(){
    return {
      date:20210102,
      maxTr: 32, //表格最多32行
      tabHeaderOne:[
        {prop:"saleCodeType",label:"类型码"},
        {prop:"orisales",label:"原销售额"},
        {prop:"netsales",label:"净销售额"},
        {prop:"checkNetSale",label:"考核销售"},
        {prop:"accountRate",label:"结算率(%)"},
        {prop:"payamt",label:"返款额"},
      ],
      tabHeaderTwo:[
        {prop:"itemclsna",label:"费用项目"},
        {prop:"payamt",label:"扣款额"},
      ],
      selectedArr:[
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        {companyFullNa:"lalalalalall",partnerNa:11111111111},
        ],
      paySum:0.00,//扣款额小计
      orisalesSum:0.00, //原销售额小计
      netsalesSum:0.00, //净销售额小计
      checkNetSaleSum:0.00, //考核销售小计
      payamtSum:0.00, //返款额小计
      invamtSum:0.00,//开票金额
    }
  },
  methods:{
    print(){
      
        this.$refs.printContent.print()
      
    },
   
    handleShowData(newval){
      let arr = [];
      this.paySum = 0.00;
      this.orisalesSum = 0.00;
      this.netsalesSum = 0.00;
      this.checkNetSaleSum = 0.00;
      this.payamtSum = 0.00;
      this.invamtSum = 0.00;
      newval.forEach((it,ind)=>{
        if(it.feeDataq.length!==0){
          it.feeDataq.forEach((item)=>{
            for(let i in item){
              if(i == "payamt"){
                this.paySum += item.payamt;
              }
              if(i == "invamt"){
                this.invamtSum += item.invamt;
              }
            }
          })
          it.feeDataq.push({itemclsna:"小计",payamt:this.paySum})
        }
        if(it.saleDataq.length!==0){
          it.saleDataq.forEach((item)=>{
            for(let i in item){
              if(i == "orisales"){
                this.orisalesSum+= item.orisales;
              }
              if(i == "netsales"){
                this.netsalesSum+= item.netsales;
              }
              if(i == "checkNetSale"){
                this.checkNetSaleSum+= item.checkNetSale;
              }
              if(i == "payamt"){
                this.payamtSum+= item.payamt;
              }
            }
          })
          it.saleDataq.push({saleCodeType:"小计",orisales:this.orisalesSum,netsales:this.netsalesSum,checkNetSale: this.checkNetSaleSum,accountRate:"",payamt:this.payamtSum})
        }
      });
        this.$nextTick(()=>{
          this.$refs.printContent.print()
        })
        
    },
    
   
  },

}
</script>

<style scoped>
*{
  font-size: 16px;
}
b{
  font-weight: bold;
}
thead{
  border-top: 1px solid #000;
  /* border-bottom: 1px solid #000; */
}
.center{
  text-align: center;
  margin: auto;
}
.right{
  text-align: right;
}
.text{
  border-bottom: 3px double black;
  font-size: 18px;
  font-weight: bold;
}
.between{
  display: flex;
  justify-content: space-between;
  margin: 10px auto;
}
.between p{
  flex: 1;
}
table{
  table-layout:fixed;
}
.info{
  width: 80%;
}
.table{
  margin-bottom: 20px;
}
tr{
  height: 30px;
  line-height: 30px;
  border-top: 1px solid black;
}
.top{margin-top: 10px}
@page{
  size: auto A4 landscape;
  margin: 15mm 13mm;
}
@media print{

}
</style>
